<template>
    <div class="app-container travelApplicationDetails">
        <div class="apply-query">
            <el-row class="filter-query">
                <el-col><span>{{$t("salesSummary.queryCondition")}}</span></el-col>
            </el-row>
            <el-form label-width="120px" style="padding: 10px 20px 0">
                <el-row style="padding-bottom: 10px">
                     <el-col :span="4">
                        <div style="margin-right: 40px">
                        <div class="labelName">{{$t("salesSummary.year")}}</div>
                        <dict-select v-model="listQuery.year" code="year" clearable></dict-select>
                        </div>
                    </el-col>
                  <el-col :span="4">
                    <div style="padding-right: 10%;">
                      <div class="labelName">Account</div>
                      <el-select multiple collapse-tags filterable clearable v-model="bu"  :placeholder="$t('placeholder.choose')">
                        <el-option v-for="item in buArray" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div style="padding-right: 10%;">
                      <div class="labelName">Sales</div>
                      <el-select multiple collapse-tags reserve-keyword filterable remote clearable v-model="sales"  placeholder="請輸入員編或姓名" :remote-method="val=>queryString(val, '1')">
                        <el-option v-for="item in salesArray" :key="item.id" :label="item.ename" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                    <el-col :span="6" style="margin-top: 23px">
                        <el-button class="yt-btn-ys" @click="getReport" type="primary">{{$t("salesSummary.search")}}</el-button>
                        <el-button class="yt-btn" @click="reset" type="primary">{{$t("salesSummary.reset")}}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="data-list">
          <div class="list-content">
            <span>Sales Summary {{$t("salesSummary.list")}}</span>
          </div>
          <div class="list-operation">
            <el-button class="yt-btn-ys"  @click="exportExcel" type="primary">{{$t('button.export')}}</el-button> <!--:row-style="changeCss"-->
          </div>
          <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" :row-style="changeCss" style="width: 100%" v-loading="loading" :element-loading-text="$t('publicWorksTarget.loading')" element-loading-spinner="el-icon-loading" max-height="650">
                <el-table-column :label="listQuery.year" align="center" fixed width="220">
                    <el-table-column label="Sales" align="center" prop="sales" width="100">
                    </el-table-column>
                    <el-table-column label="Dept." align="center" prop="dept" width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="Performance" align="center">
                    <el-table-column label="Target" prop="target" align="center" width="100">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.target}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="Awarded" prop="awarded" align="center" width="100">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.awarded}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="Awarded vs Target(%)" width="130" prop="awardedVSTarget" align="center">
                        <template slot-scope="scope">
                            <div v-format="'0.00%'">{{scope.row.awardedVSTarget}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="High Win Rate" prop="highWinRate" align="center" width="105">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.highWinRate}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="Missing Amount" prop="missingAmount" align="center" width="115">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.missingAmount}}</div>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="Current Status" align="center" >
                    <el-table-column label="Current Amount" prop="currentAmount" align="center" width="115">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.currentAmount}}</div>
                        </template>
                    </el-table-column>
                  <el-table-column label="Remaining Target" prop="remainingTarget" align="center" width="125">
                    <template slot-scope="scope">
                      <div v-format="'#,##0'">{{scope.row.remainingTarget}}</div>
                    </template>
                  </el-table-column>
                    <el-table-column :label="'Difference       \n （Current-Remaining）'" prop="difference" align="center" width="100">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.difference}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="On-going next year" prop="onGoingNextYear" align="center" width="132">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.onGoingNextYear}}</div>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="Target" align="center">
                    <el-table-column label="Q1" prop="targetQ1" align="center" width="100">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.targetQ1}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="Q2" prop="targetQ2" align="center" width="100">
                        <template slot-scope="scope" >
                            <div v-format="'#,##0'">{{scope.row.targetQ2}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="Q3" prop="targetQ3" align="center" width="100">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.targetQ3}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="Q4" prop="targetQ4" align="center" width="100">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.targetQ4}}</div>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="Awarded" prop="awardedQ1" align="center" width="100">
                    <el-table-column label="Q1" align="center">
                    <template slot-scope="scope">
                        <div v-format="'#,##0'">{{scope.row.awardedQ1}}</div>
                    </template>
                    </el-table-column>
                    <el-table-column label="Q2" prop="awardedQ2" align="center" width="100">
                    <template slot-scope="scope">
                        <div v-format="'#,##0'">{{scope.row.awardedQ2}}</div>
                    </template>
                    </el-table-column>
                    <el-table-column label="Q3" prop="awardedQ3" align="center" width="100">
                    <template slot-scope="scope">
                        <div v-format="'#,##0'">{{scope.row.awardedQ3}}</div>
                    </template>
                    </el-table-column>
                    <el-table-column label="Q4" prop="awardedQ4" align="center" width="100">
                    <template slot-scope="scope">
                        <div v-format="'#,##0'">{{scope.row.awardedQ4}}</div>
                    </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="On Going" align="center">
                    <el-table-column :label="$t('salesSummary.currentYear')+'(Q'+currentQuarter+')'" prop="onGoingOne" align="center" width="110">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.onGoingOne}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('salesSummary.currentYear')+'+1(Q'+(currentQuarter+1>4?currentQuarter+1-4:currentQuarter+1)+')'" prop="onGoingTwo" align="center" width="110">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.onGoingTwo}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('salesSummary.currentYear')+'+2(Q'+(currentQuarter+2>4?currentQuarter+2-4:currentQuarter+2)+')'" prop="onGoingThree" align="center" width="110">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.onGoingThree}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('salesSummary.currentYear')+'+3(Q'+(currentQuarter+3>4?currentQuarter+3-4:currentQuarter+3)+')'" prop="onGoingFour" align="center" width="110">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.onGoingFour}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('salesSummary.currentYear')+'+4(Q'+currentQuarter+')'" prop="onGoingFive" align="center" width="110">
                        <template slot-scope="scope">
                            <div v-format="'#,##0'">{{scope.row.onGoingFive}}</div>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
  import { getDemandReport, exportDemandReport } from '@/api/pmoReport/SalesSummary'
  import { selectBu } from '@/api/bu/index';
  import dictSelect from '@/components/Dict/dictValueSelect';
  import { getUserList } from '@/api/dict/dictValue/index';
  export default {
    data() {
      return {
        sales: [],
        salesArray: [],
        bu: [],
        buArray: [],
        currentQuarter: 0,
        listQuery: {
          year: '',
          buList: [],
          salesList: []
        },
        loading: false,
        list: []
      };
    },
    created() {
      // 获得当前季度值
      const currMonth = (new Date()).getMonth() + 1;
      this.currentQuarter = Math.floor(currMonth % 3 === 0 ? currMonth / 3 : currMonth / 3 + 1);
    },
    mounted() {
      this.getBu()
      this.getQuery()
      this.queryString('', '2')
      if (this.listQuery.year !== '') {
        this.getReport()
      }
    },
    components: { dictSelect },
    beforeDestroy() {
      window.sessionStorage.setItem('salesSummaryQueryCodition', JSON.stringify(this.listQuery))
    },
    methods: {
      exportExcel() {
        const s = JSON.stringify(this.list);
        const newList = JSON.parse(s);
        console.log(newList, 'newList')
        newList.forEach(v => {
          if (v.awardedVSTarget) {
            v.awardedVSTarget = v.awardedVSTarget * 100
          }
        })
        const obj = {
          createBy: this.$store.getters.info.id,
          year: this.listQuery.year,
          list: newList
        }


        exportDemandReport(obj).then(res => {
          const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = this.$store.state.app.filename // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
      },
      queryString(param, p) {
        // console.log(param, 'param')
        if (param && p === '1') {
          getUserList({ likeQuery: param }).then(res => {
            this.salesArray = res.data.rows;
          }).catch(() => {
            this.salesArray = []
          });
        }
        if (!param && p === '2') {
          getUserList({ likeQuery: param }).then(res => {
            this.salesArray = res.data.rows;
          }).catch(() => {
            this.salesArray = []
          });
        }
      },
      getBu() {
        selectBu().then(res => {
          // this.setBuList = res.data;
          this.buArray = res.data
        });

        /* selectBuData().then(res => {
          this.buData = res.data;
        }); */
      },
      getQuery() {
        const salesSummaryQueryCodition = window.sessionStorage.getItem('salesSummaryQueryCodition');
        if (salesSummaryQueryCodition) {
          this.listQuery = JSON.parse(salesSummaryQueryCodition);
        }
      },
      changeCss({ row }) {
        if (row.dept && row.dept.indexOf('Subtotal') !== -1) {
          return 'background:#f0f2f5;color:#ff9900'
        }
      },
      getReport() {
        this.listQuery.buList = this.bu
        this.listQuery.salesList = this.sales
        this.loading = true
        return new Promise(resolve => {
          getDemandReport(this.listQuery).then(res => {
            this.loading = false
            if (res.status === 200) {
              this.list = res.data.list
              console.log(res.data)
            } else if (res.data) {
              this.$message.error(res.data)
            }
          })
          resolve()
        })
      },
      reset() {
        this.listQuery.year = ''
        this.listQuery.buList = []
        this.listQuery.salesList = []
        this.bu = []
        this.sales = []
      }
    }
  }
</script>
<style scoped lang="scss">
  .row_class{
    background: #ff6700;
  }
  .el-table .cell.el-tooltip {
    　　white-space: pre-wrap !important;
  }
</style>



